<template>
    <el-cascader 
    v-model="area.value"
    :props="propss"
    @change="handleChange"
    @focus="focus"
    ref="cascaders"
    ></el-cascader>
</template>
<script>
  export default {
    name: 'areaSelect',
    props: {
        area: {
            type: Object,
            default () {
                return {
                    value: []
                }
            }
        }
    },
    data() {
      return {
          lazy: true
      }
    },  
    computed: {
        propss ()  {
            let _this = this
            return {
              lazy: this.lazy,
              lazyLoad (node, resolve) {
                    if (node.level == 0) {
                        _this.getProvice().then(r => {
                            resolve(_this.doMsg(r.data))
                        })
                    }
                    if (node.level == 1) {
                        _this.getCity(node.data.value).then(r => {
                            resolve(_this.doMsg(r.data, 'spell'))
                        })
                    }
                    if (node.level == 2) {
                        _this.getArea(node.data.value).then(r => {
                            resolve(_this.doMsg(r.data, 'name', true))
                        })
                    }
                    if (node.level == 3) {
                        resolve()
                    }
                }
            }
        }
    },
    methods: {
        doMsg (arr, k = 'name', status = false) {
            let ar = []
            ar = arr && arr.length && arr.map(r => {
                return {
                    label: r[k] || '',
                    value: r.id || '',
                    leaf: status
                }
            }) || []
            return ar
        },
        getProvice () {
            return new Promise(resolve => {
                this.$api.system.getProvinceLits().then(r => {
                    resolve(r)
                })
            })
        },
        getCity (id) {
            return new Promise(resolve => {
                this.$api.system.getCityList({provinceId: id}).then(r => {
                    resolve(r)
                })
            })
        },
        getArea (id) {
            return new Promise(resolve => {
                this.$api.system.getAreaList({cityId: id}).then(r => {
                    resolve(r)
                })
            })
        },
        doData () {
            const nameArray = this.$refs.cascaders.getCheckedNodes() || []
            let ar = nameArray[0].pathNodes
            let obj = {
                province:{
                    name: ar && ar[0] && ar[0].label || '',
                    id: ar && ar[0] && ar[0].value || ''
                },
                city:{
                    spell: ar && ar[1] && ar[1].label || '',
                    id: ar && ar[1] && ar[1].value || ''
                },
                area:{
                    name: ar && ar[2] && ar[2].label || '',
                    id: ar && ar[2] && ar[2].value || ''
                }
            }
            return obj
        },
        handleChange (val) {
            this.$emit('handleChange', val)
            this.$emit('handleChangeGetAll', this.doData())
        },
        focus () {
            this.$emit('focus')
        }
    }
  }
</script>